<!-- students -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'classes',
          name: 'Yi school',
        },
        {
          routeName: 'classes',
          name: 'classes',
        },
        {
          name: 'NB-2',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="classes">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <section-info
        title="Profile"
        :data="infoData"
        :hasFooter="true"
        :iconEdit="true"
        :readonly.sync="readonly"
        ref="sectionInfo"
      >
        <div slot="footer" v-if="!readonly">
          <gg-cancel-button @click="cancel">Cancel</gg-cancel-button>
          <gg-submit-button :disabled="isDisabled" @click="submitEdit"
            >Save
          </gg-submit-button>
        </div>
        <div>students</div>
      </section-info>
    </GgPage>
  </div>
</template>

<script>
export default {
  name: "students",
  data() {
    return {
      menuDatas: [
        {
          name: "NB-2",
          key: "NB-2",
          children: [
            { name: "Teachers", key: "teachers" },
            { name: "Students", key: "students" },
          ],
        },
      ],
      activeIndex: "teachers",
      infoData: [
        {
          label: "Date of birth",
          value: "",
          type: "input",
          key: "Date",
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          label: "Gender",
          value: "Female",
          type: "select",
          key: "Gender",
          selectData: ["Female", "male"],
          errorText: "required",
        },
        {
          label: "Nationality",
          value: "Singaporean",
          type: "select",
          key: "Nationality",
          selectData: ["Chinese", "America"],
          errorText: "required",
        },
        {
          label: "Residential status",
          value: "Permanent resident",
          type: "select",
          key: "Status",
          selectData: ["teacher", "student"],
          errorText: "required",
        },
        {
          label: "ID type",
          value: "-",
          type: "select",
          key: "ID",
          selectData: ["teacher", "student"],
          errorText: "required",
        },
      ],
      isDisabled: false,
      readonly: true,
    };
  },
  methods: {
    menuSelect(key, item) {
      console.log(key, item);
      this.activeIndex = key;
      this.$router.push(`/${key}`);
    },
    cancel() {},
    submitEdit() {
        this.readonly = true;
    //   this.readonly = this.infoData.every(
    //     (item) => !this.$refs.sectionInfo.getInvalidClass(item)
    //   );
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
</style>